<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>商城APP - 用户登录</title>
		<style>
			/* 全局样式 */
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
				font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
			}

			body {
				background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
				height: 100vh;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #333;
				line-height: 1.6;
			}

			/* 登录容器 */
			.login-container {
				width: 90%;
				max-width: 400px;
				max-height: 80vh;
				overflow-y: auto;
				background: rgba(255, 255, 255, 0.95);
				border-radius: 10px;
				padding: 30px;
				box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
				backdrop-filter: blur(5px);
				animation: fadeIn 0.6s ease-out;
				transform-style: preserve-3d;
			}

			@keyframes fadeIn {
				from {
					opacity: 0;
					transform: translateY(20px);
				}

				to {
					opacity: 1;
					transform: translateY(0);
				}
			}

			/* 标题样式 */
			.login-title {
				text-align: center;
				margin-bottom: 30px;
				font-size: 24px;
				font-weight: 600;
				color: #333;
				position: relative;
			}

			.login-title:after {
				content: '';
				display: block;
				width: 60px;
				height: 3px;
				background: linear-gradient(to right, #667eea, #764ba2);
				margin: 10px auto 0;
				border-radius: 3px;
			}

			/* 输入框组 */
			.input-group {
				margin-bottom: 20px;
				position: relative;
			}

			.input-group label {
				display: block;
				margin-bottom: 8px;
				font-size: 14px;
				color: #555;
			}

			.input-group input {
				width: 100%;
				padding: 12px 15px;
				border: 1px solid #ddd;
				border-radius: 8px;
				font-size: 16px;
				transition: all 0.3s;
				background-color: rgba(255, 255, 255, 0.8);
			}

			.input-group input:focus {
				border-color: #667eea;
				box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
				outline: none;
			}

			/* 验证码区域 */
			.captcha-group {
				display: flex;
				gap: 10px;
			}

			.captcha-group input {
				flex: 1;
			}

			.captcha-img {
				width: 100px;
				height: 44px;
				background: #f0f0f0;
				border-radius: 8px;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				font-size: 14px;
				color: #666;
				user-select: none;
			}

			/* 辅助选项 */
			.options {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 25px;
				font-size: 14px;
			}

			.remember-me {
				display: flex;
				align-items: center;
			}

			.remember-me input {
				margin-right: 5px;
			}

			.forgot-password {
				color: #667eea;
				text-decoration: none;
			}

			/* 登录按钮 */
			.login-btn {
				width: 100%;
				padding: 14px;
				background: linear-gradient(to right, #667eea, #764ba2);
				color: white;
				border: none;
				border-radius: 8px;
				font-size: 16px;
				font-weight: 600;
				cursor: pointer;
				transition: all 0.3s;
				margin-bottom: 20px;
			}

			.login-btn:hover {
				transform: translateY(-2px);
				box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
			}

			/* 第三方登录 */
			.divider {
				display: flex;
				align-items: center;
				margin: 20px 0;
				color: #999;
				font-size: 14px;
			}

			.divider:before,
			.divider:after {
				content: '';
				flex: 1;
				height: 1px;
				background: #ddd;
			}

			.divider:before {
				margin-right: 15px;
			}

			.divider:after {
				margin-left: 15px;
			}

			.social-login {
				display: flex;
				justify-content: center;
				gap: 15px;
			}

			.social-btn {
				width: 45px;
				height: 45px;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				background: white;
				border: 1px solid #eee;
				cursor: pointer;
				transition: all 0.3s;
			}

			.social-btn:hover {
				transform: translateY(-3px);
				box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
			}

			/* 注册提示 */
			.register-tip {
				text-align: center;
				margin-top: 20px;
				font-size: 14px;
				color: #666;
			}

			.register-link {
				color: #667eea;
				text-decoration: none;
				font-weight: 600;
				margin-left: 5px;
			}
		</style>
	</head>
	<body>
		<div class="login-container">
			<h1 class="login-title">欢迎登录</h1>

			<form>
				<!-- 账号输入 -->
				<div class="input-group">
					<label for="username">账号</label>
					<input type="text" id="username" placeholder="请输入手机号/邮箱" required>
				</div>

				<!-- 密码输入 -->
				<div class="input-group">
					<label for="password">密码</label>
					<input type="password" id="password" placeholder="请输入密码" required>
				</div>

				<!-- 验证码 -->
				<div class="input-group">
					<label for="captcha">验证码</label>
					<div class="captcha-group">
						<input type="text" id="captcha" placeholder="请输入验证码" required>
						<div class="captcha-img">AB12</div>
					</div>
				</div>

				<!-- 辅助选项 -->
				<div class="options">
					<label class="remember-me">
						<input type="checkbox"> 记住账号
					</label>
					<a href="#" class="forgot-password">忘记密码?</a>
				</div>

				<!-- 登录按钮 -->
				<button type="submit" class="login-btn">登 录</button>

				<!-- 第三方登录 -->
				<div class="divider">或使用以下方式登录</div>

				<div class="social-login">
					<div class="social-btn">
						<svg width="20" height="20" viewBox="0 0 24 24" fill="#07C160">
							<path
								d="M8.5 3C5.46 3 3 5.46 3 8.5V15.5C3 18.54 5.46 21 8.5 21H10V14H7V11H10V8.5C10 6.57 11.57 5 13.5 5H16V8H14C13.45 8 13 8.45 13 9V11H16V14H13V21H15.5C18.54 21 21 18.54 21 15.5V8.5C21 5.46 18.54 3 15.5 3H8.5Z" />
						</svg>
					</div>
					<div class="social-btn">
						<svg width="20" height="20" viewBox="0 0 24 24" fill="#1DA1F2">
							<path
								d="M22.46 6C21.69 6.35 20.86 6.58 20 6.69C20.88 6.16 21.56 5.32 21.88 4.31C21.05 4.81 20.13 5.16 19.16 5.36C18.37 4.5 17.26 4 16 4C13.65 4 11.73 5.92 11.73 8.29C11.73 8.63 11.77 8.96 11.84 9.27C8.28 9.09 5.11 7.38 3 4.79C2.63 5.42 2.42 6.16 2.42 6.94C2.42 8.43 3.17 9.75 4.33 10.5C3.62 10.5 2.96 10.3 2.38 10C2.38 10 2.38 10 2.38 10.03C2.38 12.11 3.86 13.85 5.82 14.24C5.46 14.34 5.08 14.39 4.69 14.39C4.42 14.39 4.15 14.36 3.89 14.31C4.43 16 6 17.26 7.89 17.29C6.43 18.45 4.58 19.13 2.56 19.13C2.22 19.13 1.88 19.11 1.54 19.07C3.44 20.29 5.7 21 8.12 21C16 21 20.33 14.46 20.33 8.79C20.33 8.6 20.33 8.42 20.32 8.23C21.16 7.63 21.88 6.87 22.46 6Z" />
						</svg>
					</div>
					<div class="social-btn">
						<svg width="20" height="20" viewBox="0 0 24 24" fill="#FF4E00">
							<path
								d="M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z" />
						</svg>
					</div>
				</div>

				<!-- 注册提示 -->
				<div class="register-tip">
					还没有账号?<a href="#" class="register-link">立即注册</a>
				</div>
			</form>
		</div>
	</body>
</html>
